<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            确认订单
        </header>
        <!-- 订单信息部分 -->
        <div class="order-info">
            <h5>订单配送至:</h5>
            <div class="order-info-address" @click="toUserAddress">
                <p>{{ deliveryaddress != null ? deliveryaddress.address : '请选择送货地址' }}</p>
                <i class="fa fa-angle-right"></i>
            </div>
            <p v-if="deliveryaddress != null">{{ deliveryaddress.contactName }}{{ sexFilter(deliveryaddress.contactSex) }} {{ deliveryaddress.contactTel }}</p>
            <p v-else>{{ user.userName }}{{ sexFilter(user.userSex) }}</p>
        </div>
        <h3>{{ business.businessName }}</h3>
        <!-- 订单明细部分 -->
        <ul class="order-detailed">
            <li v-for="item in cartArr">
                <div class="order-detailed-left">
                    <img :src="item.food.foodImg">
                    <p>{{ item.food.foodName }} x {{ item.quantity }}</p>
                </div>
                <p>&#165;{{ item.food.foodPrice * item.quantity }}</p>
            </li>
        </ul>
        <div class="order-deliveryfee">
            <p>配送费</p>
            <p>&#165;{{ business.deliveryPrice }}</p>
        </div>
        <div class="points">
            <hr>
            <p class="point_dis">您目前拥有 <strong>{{ points }}</strong> 点积分,是否使用积分？<button class="point_button" @click="display()">注</button></p>
            <!-- <div class="help-tip">?</div> -->
            <!-- <p class="point_dis2" style="opacity: 0.5;">5积分原价上9折，10积分原价上8折</p> -->
            <div class="points_button_div">
                <button class="points_button" @click="usePoints(1)">使用5积分</button>
                <button class="points_button" @click="usePoints(2)">使用10积分</button>
            </div>
            <p class="discard" style="opacity: 0.5;" v-if="type == 1">将使用5积分,在原价基础上打9折,再次点击可取消使用积分</p>
            <p class="discard" style="opacity: 0.5;" v-if="type == 2">将使用10积分,在原价基础上打8折,再次点击可取消使用积分</p>
            
        </div>

        <div class=red_bag>
            <p class="red_bag_info">
                饿了么红包 {{ redBagAmount }} ¥ (再次点击取消选择)
                <i class="fa fa-caret-down" @click="showRedBagList"></i>
            </p>
            <ul class="red_bag_list" v-if="redBags != null" v-show="isShowRedBagList">
                <li class="red_bag_show" v-for="item in redBags" @click="selectRedBag(item.envelopeId, item.amount)">
                    <img src="../assets/redBag.jpeg" class="red_bag_img">
                    <span class="amount">金额&ensp;{{ item.amount }}</span>
                </li>
            </ul>
        </div>
        <!-- 合计部分 -->
        <div class="total">
            <div class="total-left">
                &#165;{{ totalPrice }}
            </div>
            <div class="total-right" @click="toPayment">
                去支付
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Orders',
    data() {
        return {
            businessId: this.$route.query.businessId,
            business: {},
            user: {},
            cartArr: [],
            deliveryaddress: {},
            redBagAmount: {},
            envelopeId: {},
            redBags: [],
            type: {},
            isShown: {},
            points: {},
            isShowRedBagList: {}


        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        this.isShowRedBagList = false;
        this.redBagAmount = 0;
        this.envelopeId = null;
        this.deliveryaddress = this.$getLocalStorage(this.user.userId);
        this.type = 0;
        this.isShown = 0;
        //获取积分
        this.$axios.get('/PointController/showPointByUserId', {
            params: {
                userId: this.user.userId
            }
        }).then(response => {
            this.points = response.data.data;
            return response.data.data;
        }).catch(error => {
            console.error(error);
        })
        //获取红包
        this.$axios.get('/EnvelopeController/listEnvelopeByUserId', {
            params: {
                userId: this.user.userId
            }
        }).then(response => {
            this.redBags = response.data.data;
        }).catch(error => {
            console.error(error);
        })
        //查询当前商家
        this.$axios.get('BusinessController/getBusinessById', {
            params: {
                businessId: this.businessId
            }
        }).then(response => {
            this.business = response.data.data;
        }).catch(error => {
            console.error(error);
        });
        //查询当前用户在购物车中的当前商家食品列表
        this.$axios.get('CartController/listCart', {
            params: {
                userId: this.user.userId,
                businessId: this.businessId
            }
        }).then(response => {
            this.cartArr = response.data.data;
        }).catch(error => {
            console.error(error);
        });
    },
    computed: {
        totalPrice() {
            let totalPrice = 0;
            for (let cartItem of this.cartArr) {
                totalPrice += cartItem.food.foodPrice * cartItem.quantity;
            }
            totalPrice += this.business.deliveryPrice;
            if (this.type == 1) {
                totalPrice = totalPrice * 0.9;

            } else if (this.type == 2) {
                totalPrice = totalPrice * 0.8;
            }
            totalPrice -= this.redBagAmount;
            if (totalPrice < 0) totalPrice = 0;
            return totalPrice.toFixed(2);
        }
    },
    filters: {
    },
    methods: {
        sexFilter(value) {
            console.log(value);
            return value == 1 ? '先生' : '女士';
        },
        usePoints(type) {
            if (type == this.type) {
                this.type = 0;
                return;
            }
            if (type == 1) {
                if (this.points >= 5) {
                    this.type = type;
                } else {
                    alert("积分不足5分！")
                }
            }
            if (type == 2) {
                if (this.points >= 10) {
                    this.type = type;
                } else {
                    alert("积分不足10分！")
                }
            }
        },
        showRedBagList() {
            this.isShowRedBagList = !this.isShowRedBagList;
            // var listItems = document.querySelector(".red_bag_list");
            // if (listItems.style.display == "none") {
            //     listItems.style.display = "block";
            // } else {
            //     listItems.style.display = "none";
            // }
        },
        toUserAddress() {
            this.$router.push({ path: '/userAddress', query: { businessId: this.businessId } });
        },
        display(){
            alert("使用5积分换取九折,10积分换取八折（红包独立计算）");
        },
        selectRedBag(envelopeId, amount) {
            console.log(envelopeId, amount);
            if (this.envelopeId != envelopeId) {
                this.envelopeId = envelopeId;
                this.redBagAmount = amount;
            }
            else {
                this.envelopeId = -1;
                this.redBagAmount = 0;
            }
        },
        toPayment() {
            if (this.deliveryaddress == null) {
                alert('请选择送货地址！');
                return;
            }
            this.$axios.get('OrdersController/createOrders',
                {
                    params: {
                        userId: this.user.userId,
                        businessId: this.businessId,
                        daId: this.deliveryaddress.daId,
                        orderTotal: this.totalPrice,
                        type: this.type,
                        envelopeId: this.envelopeId
                    }
                }
            ).then(response => {
                let orderId = response.data.data;
                if (orderId > 0) {
                    this.$router.push({
                        path: '/payment', query: { orderId: orderId, }
                    });
                } else {
                    alert('创建订单失败！');
                }
            }).catch(error => {
                console.error(error);
            });
        }
    }
}
</script>

<style scoped>
/**********总容器**********/
.wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/**********header*********/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

/**********order info*********/
.wrapper .order-info {
    /*don't set the height as it may be wrapped*/
    width: 100%;
    margin-top: 12vw;
    background-color: #0097FF;
    box-sizing: border-box;
    padding: 2vw;
    color: #fff;
}

.wrapper .order-info h5 {
    font-size: 4vw;
    font-weight: 300;
}

.wrapper .order-info .order-info-address {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-weight: 700;
    user-select: none;
    cursor: pointer;
    margin: 1vw 0;
}

.wrapper .order-info .order-info-address i {
    font-size: 6vw;
}

.wrapper .order-info .order-info-address p {
    width: 90%;
    font-size: 6vw;
}

.wrapper .order-info p {
    font-size: 3.5vw;

}

.wrapper h3 {
    box-sizing: border-box;
    padding: 3vw;
    font-size: 4vw;
    color: #666;
    border-bottom: solid 1px #DDD;
}

/******order details******/
.wrapper .order-detailed {
    width: 100%;
    height: 32vw;
    overflow: auto;
}

.wrapper .order-detailed li {
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .order-detailed li .order-detailed-left {
    display: flex;
    align-items: center;
}

.wrapper .order-detailed li .order-detailed-left img {
    width: 10vw;
    height: 10vw;
    box-sizing: border-box;
    border-radius: 10px;
}

.wrapper .order-detailed li .order-detailed-left p {
    font-size: 3.5vw;
    margin-left: 3vw;
}

.wrapper .order-detailed li p {
    font-size: 3.5w;
}

.wrapper .order-deliveryfee {
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.5vw;
}

/*******order totals*******/
.wrapper .total {
    width: 100%;
    height: 14vw;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
}

.wrapper .total .total-left {
    flex: 2;
    background-color: #505051;
    color: #fff;
    font-size: 4.5vw;

    font-weight: 700;
    user-select: flex;

    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .total .total-right {
    flex: 1;
    background-color: #38ca73;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;

}

/*  红包 */

.wrapper .red_bag {
    width: 100%;
    height: 40vw;
    position: relative;
    left: 2vw;
}

.wrapper .red_bag .red_bag_list {
    width: 90vw;
    height: 25vw;
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    border: #d4e1e9 solid 1px;
    overflow: scroll;
}

.wrapper .red_bag .red_bag_list img {
    width: 4vw;
    height: 4vw;
}

.wrapper .red_bag .red_bag_info {
    padding-top: 5vw;
    font-size: 4vw;
    font-weight: 400;
    padding-left: 1vw;
}

.wrapper .red_bag .red_bag_list .red_bag_show {
    /* width: 100vw; */
    cursor: pointer;
    font-size: 5vw;
    padding-left: 3vw;
    justify-content: center;
}
.wrapper .red_bag .red_bag_img{
    top: 2vw;
}
.wrapper .red_bag .red_bag_list .amount{
    padding-left: 3vw;
    line-height: 6vw;
}

.wrapper .points {
    font-size: 4vw;
    position: relative;
    left: 2vw;
}
.wrapper .points .discard{
    font-size: 3.5vw;
    padding-left: 1vw;
    padding-top: 1.5vw;
}
.wrapper hr{
    left: 0vw;
    width: 95%;
    margin: 0;
    color: rgba(0,0,0,0.3);
}

.wrapper .points .point_dis{
    padding-top: 2.5vw;
    padding-left: 1vw;
    letter-spacing: 0.25vw;
    
}
.wrapper .points .point_button{
    margin-left: 1vw;
    background-color: rgba(0,0,0,0);
    width: vw;
    height: 4.5vw;
    font-size: 4vw;
    padding-top: 0;
    border: none;
    color: rgba(66, 85, 255, 0.921);

}
/* .wrapper .points .point_button:hover::after{
    position: relative;
    top: 10vw;
    left: -80vw;
    background-color: black;
    width: 400px;
    height: 20px;
    width: max-content;
    content: '使用五个积分换取本单九折，十个积分换取本单八折';
    z-index: 999999999;
} */

.wrapper .points .point_dis2{
    padding-left: 1vw;
}

.wrapper .points .points_button_div {
    width: 100%;
    padding-top: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper .points .points_button_div .points_button {
    width: 35vw;
    height: 8vw;
    font-size: 4vw;
    font-weight: 550;
    font-family: 'Times New Roman', Times, serif;
    background-color: rgba(229, 235, 250, 0.729);
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition-duration: 0.4s;
    margin-right: 5vw;
    border-radius: 3vw;
}

.wrapper .points .tip{
    width: 6vw;
    border-radius: 50%;
    background-color: rgba(209, 221, 251, 0.729);
}
</style>